<template>
  <div class="system-container">
    <div class="title">操作系统</div>
    <div class="chart-container">
      <vue-echarts :option="getOptions()"></vue-echarts>
    </div>
    <div class="bottom-container">
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-anzhuo1"></div>
          <div class="name">Android</div>
        </div>
        <div class="item-value">{{Android}}%</div>
      </div>
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-windows"></div>
          <div class="name">Windows</div>
        </div>
        <div class="item-value">{{Win}}%</div>
      </div>
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-apple-fill"></div>
          <div class="name">iOS</div>
        </div>
        <div class="item-value">{{ iOS }}%</div>
      </div>
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-mac"></div>
          <div class="name">MacOS</div>
        </div>
        <div class="item-value">{{ Mac }}%</div>
      </div>
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-qita1"></div>
          <div class="name">其他</div>
        </div>
        <div class="item-value">{{ Other }}%</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'systemChart',
  props:['config'],
  computed:{
      iOS(){
        const all =  this.config.iOS + this.config.Android + this.config.Win + this.config.Mac + this.config.Other
        return (((this.config.iOS / all) +"").split('.')[1])>0?(((this.config.iOS / all) +"").split('.')[1].substr(0,2).length == 2?((this.config.iOS / all) +"").split('.')[1].substr(0,2):((this.config.iOS / all) +"").split('.')[1].substr(0,2) +'0'):0
      },
    Android(){
      const all =  this.config.iOS + this.config.Android + this.config.Win + this.config.Mac + this.config.Other
      return (((this.config.Android / all) +"").split('.')[1])>0?(((this.config.Android / all) +"").split('.')[1].substr(0,2).length ==2?((this.config.Android / all) +"").split('.')[1].substr(0,2):((this.config.Android / all) +"").split('.')[1].substr(0,2)+'0'):0;
    },
    Win(){
      const all =  this.config.iOS + this.config.Android + this.config.Win + this.config.Mac + this.config.Other
      return (((this.config.Win / all) +"").split('.')[1])>0?(((this.config.Win / all) +"").split('.')[1].substr(0,2).length == 2?((this.config.Win / all) +"").split('.')[1].substr(0,2):((this.config.Win / all) +"").split('.')[1].substr(0,2)+'0'):0
    },
    Mac(){
      const all =  this.config.iOS + this.config.Android + this.config.Win + this.config.Mac + this.config.Other
      return (((this.config.Mac / all) +"").split('.')[1])>0?(((this.config.Mac / all) +"").split('.')[1].substr(0,2).length == 2?((this.config.Mac / all) +"").split('.')[1].substr(0,2):((this.config.Mac / all) +"").split('.')[1].substr(0,2)+'0'):0
    },
    Other(){
      const all =  this.config.iOS + this.config.Android + this.config.Win + this.config.Mac + this.config.Other
      return (((this.config.Other / all) +"").split('.')[1])>0?(((this.config.Other / all) +"").split('.')[1].substr(0,2).length ==2?((this.config.Other / all) +"").split('.')[1].substr(0,2):((this.config.Other / all) +"").split('.')[1].substr(0,2)+'0'):0
    }
  },
  methods: {
    getOptions() {
      return {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '操作系统',
            type: 'pie',
            radius: ['50%', '70%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.config.iOS, name: 'iOS' },
              { value: this.config.Win, name: 'Windows' },
              { value: this.config.Mac, name: 'MacOS' },
              { value: this.config.Other, name: 'Other' },
              { value: this.config.Android, name: 'Android' }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.system-container {
  width: 100%;
  height: 100%;
  .title {
    font-size: 14px;
  }
  .chart-container {
    margin-top: 30px;
    width: 100%;
    height: 100%;
    .echarts {
      width: 288px;
      height: 259px;
    }
  }
  .bottom-container {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    .icon-font {
      margin-bottom: 10px;
    }
    .name {
      margin-bottom: 10px;
      font-size: 12px;
    }
    .item-value {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 30px;
    }
  }
}
</style>
